import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/pages/login/controller/login_ctr.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:pinput/pinput.dart';

///登录页
class VerifyCode extends GetView<LoginController> {
  const VerifyCode({super.key});

  @override
  Widget build(BuildContext context) {
    final defaultPinTheme = PinTheme(
      width: 48,
      height: 48,
      textStyle: const TextStyle(
        fontSize: 20,
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
    );

    final focusedPinTheme = defaultPinTheme.copyWith(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.blue),
        borderRadius: BorderRadius.circular(8),
      ),
    );

    final submittedPinTheme = defaultPinTheme.copyWith(
      decoration: BoxDecoration(
        color: Colors.blue.shade100,
        borderRadius: BorderRadius.circular(8),
      ),
    );

    return GetBuilder<LoginController>(
      builder: (controller) {
        return WillPopScope(
            //禁用返回,防止用户多次重复获取验证码
            child: BasePage(
              bodyColor: Colors.white,
              iconType: IconType.back,
              navType: NavType.common,
              children: [
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(top: 93.w),
                  child: BaseImage(url: "verify_code.png", width: 100, height: 100),
                ),
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(top: 10.w),
                  child: Text("请输入验证码", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w400, color: Tools.fromHex("#333333"))),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.w),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("已经发送至", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w400, color: Tools.fromHex("#999999"))),
                      SizedBox(
                        width: 10.w,
                      ),
                      Text("+86 ${controller.phoneNumber}", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w400, color: Tools.fromHex("#333333")))
                    ],
                  ),
                ),
                //验证码输入OTP
                Container(
                  margin: EdgeInsets.only(top: 30.w),
                  child: Pinput(
                    length: 6,
                    defaultPinTheme: defaultPinTheme,
                    focusedPinTheme: focusedPinTheme,
                    submittedPinTheme: submittedPinTheme,
                    showCursor: true,
                    onCompleted: (pin) {
                      //print("输入完成: $pin");
                      controller.submitVerify(pin);
                    },
                  ),
                ),
                //重新发送验证码的按钮
                BaseInteractive(onClick: controller.reGetCode, childWidget: Container(margin: EdgeInsets.only(left: 18.w, top: 10.w), child: Text(controller.countdownTxt, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w400, color: Tools.fromHex("#666666")))))
              ],
            ),
            onWillPop: () async {
              return false;
            });
      },
    );
  }
}
